import React from 'react';
import {
    View,
    Text,
    ScrollView,
    TouchableOpacity, Image,
} from 'react-native';
import {
    InputItem,
    List,
} from '@ant-design/react-native';
import Dict from '../../common/Dict';
import FormItem from "../../common/components/FormItem";
import FormRadioItem from "../../common/components/FormRadioItem";
import GlobalStyles from "../../common/styles/GlobalStyles";
import PickerViewModalCas from '../../common/components/PickerViewModalCas';
import FontAwesome from "react-native-vector-icons/FontAwesome";
import ToastUtil from "../../utils/ToastUtil";
import NavigationBar from "../../common/NavigationBar";


export default class IndividualDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            sexDict: [],
            idTypeDict: [],
            userInfoVo: {
                name:'',
                gender:'',
                genderLabel : '',
                idType: '',
                idTypeLabel: '',
                idNumber: '',
                contactPhone:'',
                email:'',
                contactAddress:'',
                unitName:'',
                position: '',
            },
        };
    }

        //
    async componentDidMount(){
        const {detail} = this.props.navigation.state.params;

        const gender = await Dict.getDict('dict_gender')
        const idType = await Dict.getDict('id_type')

        if(this.state.userInfoVo.idType === '' && idType.length > 0){
            this.state.userInfoVo.idType = idType[0].value
            this.state.userInfoVo.idTypeLabel = idType[0].label
        }
        if(this.state.userInfoVo.gender === '' && gender.length > 0){
            this.state.userInfoVo.gender = gender[0].value
            this.state.userInfoVo.genderLabel = gender[0].label
        }

        this.setState({
            sexDict: gender,
            idTypeDict: idType,
            userInfoVo: {
                genderLabel: detail.gender===0?'女':'男',
                ...detail
            }
        })
    }

    _changeFormData(key,value,type){
        let update = {};
        if(type === 'radio'){
            console.log(value)
            update = {
                [key+'Label']: value.label,
                [key]: value.value
            }
        }else if(type === 'select'){
            update = {
                [key]: value.value[0],
                [key+'Label']: value.label[0],
            };
        }else{
            update = { [key]: value};
        }
        const data = Object.assign({}, this.state.userInfoVo, update);
        this.setState({
            userInfoVo: data,
        });
        this.props.onChange && this.props.onChange(data)
    }
    render() {
        const {navigation} = this.props;
        const userInfoVo = this.state.userInfoVo
        return (
            <View style={[GlobalStyles.innerTabPanel,{flexDirection: 'column',flex: 1}]}>
                {/* 自定义顶部导航条 */}
                <NavigationBar
                    navigation={navigation}
                    headerBackTitle={'个人详情'}
                />
                <ScrollView
                    style={{flex: 1}}
                    automaticallyAdjustContentInsets={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <List>
                        <InputItem
                            value={userInfoVo.name}
                            maxLength={50}
                            onChange={(value) => this._changeFormData('name',value)}
                            placeholder="请输入姓名">
                            <View style={GlobalStyles.formRow}>
                                <Text>姓名</Text>
                            </View>
                        </InputItem>
                        <FormRadioItem
                            label={'性别'}
                            checked={[userInfoVo.gender]}
                            data={this.state.sexDict}
                            onChange={(value) => this._changeFormData('gender',value, 'radio')}
                        />
                        <FormItem
                            label={'证件类型'}
                            placeholder={'请选择类型'}
                            maxLength={50}
                            value={userInfoVo.idTypeLabel}
                            onClick={() => {
                                this.refs.typePicker.show();
                            }}
                        />
                        <InputItem
                            value={userInfoVo.idNumber}
                            type={'number'}
                            maxLength={50}
                            onChange={(value) => this._changeFormData('contactIdNumber',value)}
                            placeholder="请输入证件号码">
                            证件号码
                        </InputItem>
                        <InputItem
                            value={userInfoVo.contactPhone}
                            type={'phone'}
                            maxLength={50}
                            onChange={(value) => this._changeFormData('contactPhone',value)}
                            placeholder="请输入联系电话">
                            联系电话
                        </InputItem>
                        <InputItem
                            value={userInfoVo.email}
                            onChange={(value) => this._changeFormData('contactEmail',value)}
                            placeholder="请输入电子邮箱">
                            电子邮箱
                        </InputItem>
                        <InputItem
                            value={userInfoVo.contactAddress}
                            maxLength={100}
                            onChange={(value) => this._changeFormData('contactAddress',value)}
                            placeholder="请输入联系地址">
                            联系地址
                        </InputItem>
                        <InputItem
                            value={userInfoVo.unitName}
                            maxLength={50}
                            onChange={(value) => this._changeFormData('unitName',value)}
                            placeholder="请输入单位名称">
                            单位名称
                        </InputItem>
                        <InputItem
                            value={userInfoVo.position}
                            maxLength={50}
                            onChange={(value) => this._changeFormData('position',value)}
                            placeholder="请输入职务">
                            职务
                        </InputItem>
                    </List>
                </ScrollView>
                <PickerViewModalCas
                    ref={'typePicker'}
                    colsNum={1}
                    data={this.state.idTypeDict}
                    title={'证件类型'}
                    onChoose={(data) => {
                        // this.setState({selectedPickData: data});
                        this._changeFormData('idType',data, 'select');
                        this.refs.typePicker.hidden();
                    }}
                />
            </View>
        );
    }
}
